﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Responsive Slider</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/jquery.responsive.slider.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#r-slider-wrapper').rslider();
        });
    </script>
</head>
<body>
    <div id="r-slider-wrapper">
        <div id="r-slider-category-wrapper">
            <select>
                <option value="first-cat">First Category</option>
                <option value="second-cat">Second Category</option>
                <option value="third-cat">Third Category</option>
                <option value="fourth-cat">Fourth Category</option>
            </select>
            <ul>
                <li><a href="#first-cat">First Category</a> </li>
                <li><a href="#second-cat">Second Category</a> </li>
                <li><a href="#third-cat">Third Category</a> </li>
                <li><a href="#fourth-cat">Fourth Category</a> </li>
            </ul>
            <div id="r-slider-content-right">
                <div id="r-nav">
                    <img src="images/prev.png" id="r-prev" alt="Previous" />&nbsp;<img id="r-next" src="images/next.png"
                        alt="Next" />
                </div>
            </div>
        </div>
        <div id="r-slider-contents-wrapper">
            <div id="r-slider-content-left">
                <div id="first-cat">
                    <div class="r-img-wrap">
                        <img src="images/1.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/2.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/3.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/4.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/5.jpg" />
                    </div>
                    <div class="clear">
                    </div>
                </div>
                <div id="second-cat">
                    <div class="r-img-wrap">
                        <img src="images/1a.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/2a.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/3a.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/4a.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/5a.jpg" />
                    </div>
                    <div class="clear">
                    </div>
                </div>
                <div id="third-cat">
                    <div class="r-img-wrap">
                        <img src="images/1b.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/2b.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/3b.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/4b.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/5b.jpg" />
                    </div>
                    <div class="clear">
                    </div>
                </div>
                <div id="fourth-cat">
                    <div class="r-img-wrap">
                        <img src="images/1c.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/2.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/3b.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/4a.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/5.jpg" />
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
